<template> 
<el-dialog :model-value ="true" :title="props.title" width="500px" @close="handleCancel">
    <el-form :model="form" label-width="120px" :rules="rules" ref="formRef">
      <el-form-item label="海报名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入海报名称"  />
      </el-form-item>
      <el-form-item label="海报类型" prop="typeId">
        <el-select v-model="form.typeId" placeholder="请选择海报类型"  clearable>
          <el-option v-for="item in props.posterList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="关联路径" prop="path">
        <AppLinkInput v-model="form.path" />
      </el-form-item>
      <el-form-item label="海报图片" prop="backgroundImage">
        <UploadImg v-model="form.backgroundImage" :limit="1" height="148px" width="148px" >
          <template #tip> 建议海报图片尺寸：640*1008</template>
        </UploadImg>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </template>
</el-dialog>
</template>
<script setup lang="ts">
import { ref,onMounted } from 'vue'
const props =withDefaults(defineProps<{
  title?: string,
  currentObj?: any,
  posterList?: any[]
}>(), {
  title: '新增海报',
  currentObj: ()=>({}),
  posterList: ()=>[]
})
const emits = defineEmits<{
  (emitStr: 'ok', emitData: any): void;
  (emitStr: 'cancel'): void
}>()
const form = ref({
  name: '',
  typeId: undefined as any,
  backgroundImage: '',
  path: '',
})
const formRef = ref<any>(null)
const rules = ref({
  name: [{ required: true, message: '请输入海报名称', trigger: 'blur' }],
  typeId: [{ required: true, message: '请选择海报类型', trigger: 'blur' }],
  path: [{ required: true, message: '请输入关联路径', trigger: 'blur' }],
  backgroundImage: [{ required: true, message: '请上传海报图片',  trigger: 'blur' }],
})
const handleCancel = () => {
  emits('cancel')
}
const handleSubmit = () => {
  if(!formRef.value) return
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      emits('ok', form.value)
    }else{
      return false
    }
  })
}
onMounted(() => {
  if(props.currentObj.id){
    form.value = {
      name: props.currentObj.name,
      typeId: props.currentObj.typeId,
      backgroundImage: props.currentObj.backgroundImage,
      path: props.currentObj.path,
    }
  }
})
</script>
